<template>
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <router-link to="/index">
          <el-menu-item index="0">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </template>
          </el-menu-item>
        </router-link>
        <el-submenu  :index="menu.name" :key="menu.name" v-for="menu in menuList">
           <template slot="title">
             <i :class="menu.icon"></i>
             <span>{{menu.title}}</span>
           </template>
        <router-link :to="item.path" :key="item.name" v-for="item in menu.children">
          <el-menu-item :index="item.name">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </template>
          </el-menu-item>
        </router-link>
        </el-submenu>
      </el-menu>
</template>

<script>
export default {
  name: 'SideMenu',
  data () {
    return {
      menuList: [
        // {
        //   name: 'SysMangar',
        //   title: '系统管理',
        //   icon: 'el-icon-s-operation',
        //   path: '',
        //   children: [
        //     {
        //       name: 'SysUser',
        //       title: '用户管理',
        //       icon: 'el-icon-s-custom',
        //       path: '/sys/users',
        //       children: []
        //     },
        //     {
        //       name: 'SysRole',
        //       title: '角色管理',
        //       icon: 'el-icon-rank',
        //       path: '/sys/roles',
        //       children: []
        //     },
        //     {
        //       name: 'SysMenu',
        //       title: '菜单管理',
        //       icon: 'el-icon-menu',
        //       path: '/sys/menus',
        //       children: []
        //     }
        //   ]
        // },
        // {
        //   name: 'SysTools',
        //   title: '系统工具',
        //   icon: 'el-icon-s-tools',
        //   path: '',
        //   children: [
        //     {
        //       name: 'SysDict',
        //       title: '数字字典',
        //       icon: 'el-icon-s-order',
        //       path: '/sys/dicts',
        //       children: []
        //     }
        //   ]
        // }
      ]
    }
  },
  methods: {
    getMenuList () {
      this.$axios.get('/sys/menu/nav').then((result) => {
        this.menuList = result.data.nav
      })
    }
  },
  created() {
    this.getMenuList()
  },
}
</script>
<style scoped>
.el-dropdown-link {
    cursor: pointer;
  }
</style>
